import React from 'react';

/**
 * 首页组件
 * 显示博客网站的主页面内容
 */
export default function HomePage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <section className="mb-12">
        <h1 className="text-3xl font-bold mb-4 text-gray-800">欢迎访问我的博客</h1>
        <p className="text-gray-600 mb-6">
          这里是我的个人博客网站，分享技术文章和生活感悟。
        </p>
        <div className="bg-blue-50 border-l-4 border-blue-500 p-4">
          <p className="text-blue-700">
            📢 最新公告：网站正在持续更新中，敬请期待更多精彩内容！
          </p>
        </div>
      </section>
      
      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4 text-gray-800">热门文章</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {/* 文章卡片示例 */}
          {[1, 2, 3, 4, 5, 6].map((item) => (
            <article key={item} className="bg-white rounded-lg shadow-sm border overflow-hidden hover:shadow-md transition-shadow">
              <div className="p-6">
                <h3 className="text-xl font-medium mb-2 text-gray-800">文章标题 {item}</h3>
                <p className="text-gray-600 mb-4 line-clamp-2">
                  这是文章内容摘要，介绍文章的主要内容和亮点...
                </p>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-500">发布于 2024-01-0{item}</span>
                  <button className="text-blue-600 hover:text-blue-800 text-sm">
                    阅读更多 →
                  </button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>
      
      <section>
        <h2 className="text-2xl font-semibold mb-4 text-gray-800">关于我</h2>
        <div className="bg-white p-6 rounded-lg shadow-sm border">
          <p className="text-gray-700">
            我是一名热爱技术的开发者，专注于前端技术和用户体验设计。
            这个博客是我分享学习心得和技术见解的平台。
          </p>
        </div>
      </section>
    </div>
  );
}